<template>
  <div class="container">
    <QuillEditor
      ref="editor"
      contentType="html"
      :options="options"
      :content="modelValue"
      @update:content="updateContent"
      :style="{ minHeight: '250px' }"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, defineEmits, onMounted } from "vue"
import { QuillEditor } from "@vueup/vue-quill"
import "@vueup/vue-quill/dist/vue-quill.snow.css"

defineProps(["modelValue"])
const emits = defineEmits(["update:modelValue"])
const editor = ref()
const options = {
  theme: "snow",
  modules: {
    toolbar: [
      ["bold", "italic", "underline", "strike"],
      ["blockquote", "code-block"],
      [{ header: 1 }, { header: 2 }],
      [{ list: "ordered" }, { list: "bullet" }],
      [{ script: "sub" }, { script: "super" }],
      [{ indent: "-1" }, { indent: "+1" }],
      [{ direction: "rtl" }],
      [{ size: ["small", false, "large", "huge"] }],
      [{ header: [1, 2, 3, 4, 5, 6, false] }],
      [{ color: [] }, { background: [] }],
      [{ font: [] }],
      [{ align: [] }],
      ["clean"],
      ["link", "image", "video"]
    ]
  }
}
const updateContent = (content: string) => {
  emits("update:modelValue", content)
}
</script>

<style lang="scss" scoped></style>
